<template>
	<view class="container">
		<!-- #ifdef H5 -->
		<uni-header></uni-header>
		<!-- #endif -->

		<view class="index-box com-box">
			<!-- #ifdef H5 -->
			<view class="ttl-box pc">
				<view class="ttl">
					<navigator class="link" url="/pages/ex/bid/list">招标中心</navigator>
					<navigator class="link" url="/pages/ex/product/add">发布</navigator>
					<navigator class="link" url="/pages/ex/product/manage">商品管理</navigator>
				</view>
			</view>
			<!-- #endif -->

			<view class="content-box">
				<view class="left-box">
					<view class="bid-list">
						<block v-for="(item, index) in bidList" :key="index">
							<view class="bid-item">
								<text class="title">{{item.goodsName}}</text>
								<text class="num">数量：{{item.num}}吨</text>
								<text class="size">规格：{{item.specifications}}</text>
								<view class="text-wrapper">
									<view class="shop clamp">
										<image :src="item.imgUrl" mode="aspectFill"></image>
										{{item.userName}}
									</view>
									<view class="time">
										<text>截止时间：{{$util.sliceTime(item.effectiveTime)}}</text>
										<text>送达时间：{{$util.sliceTime(item.sendTime)}}</text>
									</view>
								</view>
								<text class="text">需求地址：{{item.sendAddress}}</text>
							</view>
							<view class="action-box">
								<button type="primary" class="action-btn default" @click="bidConfirm(0, item)">查看联系人</button>
								<button type="primary" class="action-btn spec" @click="bidConfirm(1, item)">查看资质</button>
								<button type="primary" class="action-btn" @click="bidConfirm(2, item)">投递</button>
							</view>
						</block>

					</view>
					<!-- #ifdef H5 -->
					<uni-pagination :num='pageNum' :page='pages' @pagechange="pagechange"></uni-pagination>
					<!-- #endif -->
					<uni-load-more class="sp" :status="loadingType"></uni-load-more>

					<uni-modal-next :show="bidShow" @close="cancel" title="招标" @cancel="cancel" @confirm="confirm">
						<view class="inner" v-if='bidType==0'>
							<view>{{bidPhone}}</view>
						</view>
						<view class="inner" v-if='bidType==2'>
							<view class="detail-desc">
								<view class="d-info">
									<input class="input" type="number" v-model="dealPrice" placeholder="请输入金额" />
									<text>元/吨</text>
								</view>
								<view class="d-info">
									<text class="input">上传合同</text>
								</view>
								<view class="d-info">
									<uni-upimg @change="getImageInfo" :upimg_preview="serviceArr" :upload_count="1"></uni-upimg>
								</view>
							</view>
						</view>
					</uni-modal-next>
				</view>
				<!-- #ifdef H5 -->
				<view class="right-box pc">
					<view class="info-box">
						<view class="user-info">
							<view class="portrait-box">
								<view class="portrait">
									<image @click="toLogin" class="portrait" :src="userInfo.imageUrl ? userInfo.imageUrl : '/static/missing-face.png'"></image>
								</view>
								<view class="info">
									<text @click="toLogin" class="username">{{ hasLogin ? userInfo.username || '未设置昵称' : 'Hi~您好' }}</text>
									<text v-if="userInfo.username" class="userphone">15762565253</text>
									<text v-else>欢迎来到贸易平台</text>
								</view>
							</view>
							<view class="login-area" v-if="!hasLogin">
								<navigator class="link" url="/pages/public/login">请登录</navigator>
								<navigator class="link" url="/pages/public/register">请注册</navigator>
							</view>
						</view>
						<view class="msg-box">
							<view class="title">
								<text>消息</text>
								<navigator class="link" url="/pages/notice/notice">
									查看更多
									<text class="icon icon-arrow_right"></text>
								</navigator>
							</view>
							<navigator v-for="(item, index) in noticeList" :key="'notice' + index" class="notice-item" url="/pages/notice/notice">
								<text class="tip clamp">【{{item.title}}】</text>
								<text class="introduce clamp">{{item.content}}</text>
							</navigator>
							<view v-if="!noticeList[0]" style="margin: 10px;">
								暂无消息
							</view>
						</view>
						<!-- 订单 -->
						<view class="order-section">
							<view class="order-sub" @click="navTo('/pages/order/list?state=0')" hover-class="common-hover" :hover-stay-time="50">
								<text class="icon icon-order"></text>
								<text>全部订单</text>
							</view>
							<view class="order-sub" @click="navTo('/pages/order/list?state=10')" hover-class="common-hover" :hover-stay-time="50">
								<text class="icon icon-pay"></text>
								<text>待发货</text>
							</view>
							<view class="order-sub" @click="navTo('/pages/order/list?state=30')" hover-class="common-hover" :hover-stay-time="50">
								<text class="icon icon-fahuo"></text>
								<text>运输中</text>
							</view>
							<view class="order-sub" @click="navTo('/pages/order/list?state=60')" hover-class="common-hover" :hover-stay-time="50">
								<text class="icon icon-shouhou"></text>
								<text>退款/售后</text>
							</view>
						</view>
					</view>
				</view>
				<!-- #endif -->
			</view>
		</view>

		<uni-nav-bar :tabIndex="1"></uni-nav-bar>

		<!-- #ifdef H5 -->
		<uni-footer></uni-footer>
		<!-- #endif -->
	</view>
</template>

<script>
	import uniModalNext from '@/components/uni-modal-next.vue'
	import uniLoadMore from '@/components/uni-load-more.vue'
	import uniNavBar from '@/components/uni-nav-bar.vue'
	import uniHeader from '@/components/h5/uni-header.vue'
	import uniFooter from '@/components/h5/uni-footer.vue'
	import uniPagination from '@/components/h5/uni-pagination.vue'
	import uniUpimg from '@/components/uni-upimg.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			uniModalNext,
			uniLoadMore,
			uniNavBar,
			uniHeader,
			uniFooter,
			uniPagination,
			uniUpimg
		},
		data() {
			return {
				id: '',
				bidShow: false,
				bidType: 0,
				bidPhone: '',
				dealPrice: '',
				serviceArr: [],
				info: {},
				loadingType: 'more', //加载更多状态
				bidList: [],
				pageNum: 1,
				pageSize: 10,
				pages: 0,
				noticeList: []
			}
		},
		onShow() {
			// #ifdef MP-WEIXIN
			if (wx.hideHomeButton) {
				wx.hideHomeButton()
			}
			// #endif
		},
		onLoad(option) {
			// #ifdef H5
			this.$api.request('/zruser/messagePage', {
				type: 0,
				pageNum: 1,
				pageSize: 10
			}, {
				method: 'GET'
			}).then(res => {
				this.noticeList = res.data
			})
			// #endif
			this.loadData()
		},
		//下拉刷新
		onPullDownRefresh() {
			this.loadData('refresh')
			// console.log('下拉刷新')
		},
		//加载更多
		onReachBottom() {
			this.loadData()
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			getImageInfo(e) {
				this.serviceArr = e
			},
			pagechange(currentPage) {
				console.log(currentPage)
				// ajax请求, 向后台发送 currentPage, 来获取对应的数据
				uni.showLoading({
					title: '正在加载'
				})
				this.pageNum = currentPage
				this.loadData('current')
			},
			//加载商品 ，带下拉刷新和上滑加载
			loadData(type = 'add') {
				//没有更多直接返回
				if (type === 'add') {
					if (this.loadingType === 'nomore') {
						return
					}
					this.loadingType = 'loading'
				} else {
					this.loadingType = 'more'
				}
				if (type === 'refresh') {
					this.pageNum = 1
				}
				this.$api.request('/publishingNeeds/publishingNeddsPage', {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}, {
					method: 'GET'
				}).then(res => {
					let tempList = res.data.pageList
					if (type !== 'add') {
						this.bidList = []
					}
					this.pages = Math.ceil(res.data.total / this.pageSize)
					this.loadingType = this.pageNum < this.pages ? 'more' : 'nomore'
					this.bidList = this.bidList.concat(tempList)
					this.pageNum = this.pageNum + 1
					console.log(this.loadingType)
					if (type !== 'add') {
						uni.hideLoading()
						uni.stopPullDownRefresh()
					}
				})
			},
			//投递
			bidConfirm(type, item) {
				this.id = item.id
				this.bidPhone = item.phone
				this.bidType = type
				this.bidShow = true
				if (this.bidType == 1) {
					this.bidShow = false
					uni.navigateTo({
						url: `/pages/bid/contract?id=${item.createPerson}`
					})
				}
			},
			confirm() {
				this.bidShow = false
				if (this.bidType == 2) {
					if (!this.dealPrice) {
						this.$api.msg('请输入金额')
					} else {
						this.$api.request('/publishingNeeds/bid', {
							publishingNeedsId: this.id,
							dealPrice: this.dealPrice,
							contractUrl: this.serviceArr.join(',')
						}).then(res => {
							this.$api.msg(res.data)
						})
					}
				}
			},
			cancel() {
				this.bidShow = false
			}
		},
	}
</script>

<style lang="scss">
	.container {
		padding-bottom: 100upx;
	}
	
	.index-box {
		padding-top: 20upx;
	}

	/* 投标列表 */
	.bid-list {
		margin-bottom: 0;

		.bid-item {
			padding-bottom: 0;
		}
	}

	.action-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100upx;
		margin-top: -1px;
		padding: 0 60upx;
		position: relative;
		border-top: 1upx solid #fff;
		border-bottom: 1upx solid $base-color-light;
	}

	.action-btn {
		min-width: 160upx;
		height: 60upx;
		margin-left: 24upx;
		margin-right: 0;
		text-align: center;
		line-height: 60upx;
		font-size: $base-font-sm;
		border-radius: 60upx;

		&:after {
			content: none;
		}

		&.default {
			color: #868686;
			line-height: 58upx;
			background-color: #fff;
			border: 1upx solid;
		}

		&.spec {
			background-color: #ff9a2b;
		}
	}

	.inner {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20upx $base-row-spacing;
		font-size: $base-font-base;
		line-height: 80upx;

		.input {
			height: 80upx;
			padding: 0 10upx;
			font-size: $base-font-base;
			line-height: 80upx;
			// border: 1upx solid $base-color-light;
		}

	}

	/* 详情 */
	.detail-desc {
		.d-info {
			.d-ttl {
				width: 150upx;
			}
		}
	}

	/* #ifdef H5 */
	@media screen and (min-width: 750px) {
		.container {
			padding-bottom: 0;
		}

		.index-box {
			margin: 0 auto 20px;
			padding: 0;
		}

		.ttl-box {
			margin-bottom: 20px;

			.ttl {
				display: flex;
				height: 50px;
				font-weight: bold;
				line-height: 50px;
				color: #fff;
				background-color: $base-color-pc;
				text-align: center;

				.link {
					padding: 0 25px;
				}
			}
		}

		.content-box {
			display: flex;
			justify-content: space-between;

			.left-box {
				width: 920px;
			}
		}

		.info-box {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 240px;
			height: 537px;
			background-color: #fff;

			.user-info {
				flex-shrink: 0;
				padding: 20px 15px;
				border-bottom: 1px solid $base-color-light;

				.portrait-box {
					display: flex;

					image {
						display: block;
						width: 70px;
						height: 70px;
					}
				}

				.info {
					display: flex;
					justify-content: center;
					flex-direction: column;
					padding-left: 10px;
					font-size: 14px;
				}

				.username {
					display: block;
					margin-bottom: 5px;
					font-size: 16px;
				}

				.login-area {
					display: flex;
					margin-top: 20px;
					justify-content: space-between;

					.link {
						width: 100px;
						height: 30px;
						font-size: 14px;
						line-height: 28px;
						text-align: center;
						color: $base-color-pc;
						border: 1px solid $base-color-pc;

						&:hover {
							color: #fff;
							background-color: $base-color-pc;
						}
					}
				}
			}

			.msg-box {
				flex: 1;
				overflow: hidden;

				.title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 5px 10px;
					font-size: 20px;
					font-weight: bold;
					color: $base-color-dark;

					.link {
						display: flex;
						align-items: center;
						color: $base-color-light;
						font-size: 14px;
						font-weight: normal;
					}
				}

				.notice-item {
					display: flex;
					padding: 0 10px;
					font-size: 14px;
					color: $base-color-dark;
					line-height: 30px;

					.tip {
						flex-shrink: 0;
						width: 84px;
						color: $base-color-pc;
					}
				}
			}

			.order-section {
				display: flex;
				flex-wrap: wrap;
				flex-shrink: 0;
				overflow: hidden;
				height: 180px;
				border-top: 1px solid $base-color-light;

				.order-sub {
					display: flex;
					flex-wrap: wrap;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 80px;
					height: 90px;
					font-size: 14px;
					cursor: pointer;
					border-right: 1px solid $base-color-light;
					border-bottom: 1px solid $base-color-light;

					&:nth-child(3n) {
						border-right: 0;
					}

					.icon {
						margin-bottom: 5px;
						font-size: 40px;
						color: $base-color-pc;
					}
				}
			}
		}

		/* 投标列表 */
		.bid-list {
			margin-bottom: 20px;

			.bid-item {
				padding-bottom: 10px;
			}
		}

		.action-box {
			justify-content: flex-end;
			margin-top: -1px;
			width: 100%;
			height: 60px;
			position: relative;
			padding: 0 30px;
			border-top: 1px solid #fff;
			border-bottom: 0;
		}

		.action-btn {
			min-width: 120px;
			width: 120px;
			height: 40px;
			margin-left: 24px;
			line-height: 40px;
			font-size: 14px;
			border-radius: 40px;

			&.del {
				line-height: 38px;
				border: 1upx solid;
			}

			&.default {
				line-height: 38px;
				border: 1upx solid;
			}

		}

		.inner {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20upx $base-row-spacing;
			font-size: $base-font-base;
			line-height: 80upx;

			.input {
				height: 80upx;
				padding: 0 10upx;
				font-size: $base-font-base;
				line-height: 80upx;
				// border: 1upx solid $base-color-light;
			}

			/* 详情 */
			.detail-desc {
				.d-info {
					font-size: 33px;
					line-height: 96px;
				}
			}


		}

		/* 详情 */
		.detail-desc {
			.d-info {
				.d-ttl {
					width: 100px;
				}
			}
		}
	}

	/* #endif */
</style>
